<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Lili Soe Blog</title>
<style type="text/css" media="screen">
  body{background: url("http://p1.so.qhmsg.com/t01675f9fe5211bc546.jpg") repeat 0 center fixed;
  background-size: contain; 
  opacity: 0.9;
  margin: 0; padding: 0;
  font-size: 15px;
  font-family: "微软雅黑";
  }



#box{height:auto;
       width: 750px;
       margin: 50px auto;
       overflow: hidden;
         border:1px solid #999;}

  .direct{list-style: none; 
  display: block;
  height: 30px; 
  border-bottom: 2px solid brown; 
  border-top: 2px solid brown;
  line-height: 30px;
   background: rgb(211, 201, 155); }

  .direct li{cursor: pointer;
      float: left; 
    margin: 0 5px; 
    list-style: none;
    height: 28px;

    display: inline-block;
    width:120px; 
    text-align: center;}

.direct li:hover{ 
      color:white; transform: rotate(10deg); transition: 0.5s;}

#box div{    height:1200px;
           line-height: 2em;
             text-align: left;
             border:1px solid #369;
             border-top: none;
             padding: 5px;
             overflow: hidden;}

img{width: 150px;
    height:215px; 
    padding:12px 12px 18px;
    background-color: white;
    display: block;
    overflow: hidden;
    margin: 10px;
     }

 .pic{list-style: none; }
 .photo{float:left;
       margin: 10px;}
 img:hover{transform:scale(1.2,1.2);
      transition: 0.5s;
      box-shadow: 5px 5px 6px #ccc;
       }
.hide{display: none;}
#box{background:rgb(167, 118, 88);}
.in{margin: 50px auto; width: 250px; height: 250px; }

</style>

<script type="text/javascript">
	    window.onload=function(){
  var obox=document.getElementById("box");
  var oul=obox.getElementsByTagName("ul")[0];
  var olis=oul.getElementsByTagName("li");
  var odivs=obox.getElementsByTagName("div");
  for(var i=0,len=olis.length;i<len;i++){
    olis[i].index=i;
    olis[i].onclick=function(){
      for(var n=0;n<len;n++){
        olis[n].className="";
        odivs[n].className="hide";
      }
      this.className="on";
      odivs[this.index].className="";
    }
  };
}
</script>


</head>
<body>
	<div id="box">
		<ul class="direct">
			<li class="on" >Home</li>
			<li>Introduce</li>
			<li>Photo</li>
			<li>Diary</li>
			<li>Mood</li>
		</ul>
		<div class="hh">
		    <img class="in" src="http://ww4.sinaimg.cn/large/681ece82gw1f9oc5dz7gnj20rs0rs1ct.jpg" >

			<h1><center>Welcome To My Blog!</center></h1>


		</div>

		<div class="hide">
      
			<p><span style="font-size: 20px; color:rgba(255, 255, 255, 1) ;font-family:forte;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;My name is Lili Soe. I'm from Guangdong province. I'm 21 this year. Last year, i broke up with my boyfriend. So,I'm still single yet! I have many hobbies,like singing,travelling,doing sports,cooking and so on. There are total 7 menbers in my family: my mom, my dad,my grandmom, two elder sister , my little brother and I. you know?  my family is very lovely and warm.  Do you want to make a friend with me? come on , add my Wechat:TwinsBaby-yj!</span><p>
		</div>
             <div class="hide">
             	<ul class="pic">
             		<li class="photo"><img src="http://ww3.sinaimg.cn/mw690/681ece82gw1f8u7kp99rtj20qo0zk4qp.jpg"></li>
             		<li class="photo"><img src="http://ww2.sinaimg.cn/mw690/681ece82gw1f8bwpj4of7j20qo0zk1ix.jpg"></li>
             		<li class="photo"><img src="http://ww1.sinaimg.cn/mw690/681ece82gw1f9ocibqur7j20k10zkwj3.jpg"></li>
             		<li class="photo"><img src="http://ww4.sinaimg.cn/mw690/681ece82gw1f9ocic1vebj20qo100n3o.jpg"></li>
             		<li class="photo"><img src="http://ww1.sinaimg.cn/mw690/681ece82gw1f9ocifoqkij20qo0zkwpx.jpg"></li>
             		<li class="photo"><img src="http://ww2.sinaimg.cn/mw690/681ece82gw1f8u7km2vlkj20qo0ztkiu.jpg"></li>
                    <li class="photo"><img src="http://ww3.sinaimg.cn/mw690/681ece82gw1f9ocicjz6kj20k00u0q63.jpg"></li>
                    <li class="photo"><img src="http://ww1.sinaimg.cn/mw690/681ece82gw1f9ocidiuu2j20k00u0q75.jpg"></li>
                    <li class="photo"><img src="http://ww1.sinaimg.cn/mw690/681ece82gw1f9ociew123j20k10zkgsg.jpg"></li>



             </ul>

             </div>
             <div class="hide">
             <details><summary><span style="font-size: 20px; color:rgba(255, 255, 255, 1) ;font-family:forte;">2016-11-11</span></summary>
             	<p><strong><span style="font-size: 20px; color:white;">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生活在他方，湿冷的天气，总让人容易泛起乡愁。中午和妈咪通了视频，
               觉得妈咪有些憔悴了，听妈咪说布布又上广州了，金毛过些日子就去南京巩固化妆技术，回来之后会开工作室，听到这个消息，
               我挺欣慰的，姐姐她终于有目标了，一定要好好加油！！还好有弟弟在爸妈身边，陪着爸妈，想想，女儿们长大了，总有离家的一天，
               让人觉得好心酸，好想陪在爸妈身边，好想永远都不离开...
               这些日子，总的来说，在学校过得还是不错的，忙碌的生活，尽管也会遇到困难，尽管也有些不顺心的事情，但是我相信自己足够强大
               去应付，无论是什么事，我都可以解决，让自己好好的。让不好的事情，让不喜欢自己的人都离开吧，我也会慢慢的不再在乎，毕竟
               还有很多很多事情等着自己去做，不应该将心思和时间放在没有意义的事情上。
               男朋友，男朋友，怎样都比前男友，前男友顺口。这些天，真的想念转轴了，大概是天冷了吧，总想起一些让人温暖的回忆。握着你的手，
               抱着你，偶尔向你撒撒娇，每天一张照片，不开心时给你唱歌，每晚睡觉前一句晚安，有多久了......
               想你了，尽管此刻的自己是如此矫情，且也不愿意承认，但不得不承认，真的想你了... ...
             
              
               
                     
  </span></strong></p>
  </details>
             </div>
             <div class="hide">
             	<center><textarea name="mood" cols="20px" rows="2px"></textarea></center>
             	<center><h1>Today Is Happy!</h1></center>
             </div>
	</div>
</body>
</html>